<template>
<!-- 动态 class -->
<!-- 两种情况:
    1. 绑定对象(常用) 判断是否应用指定类名
      { 类名: 是否应用这个类名 }
    2. 绑定数组 应用多个类名
      [ '类名1', '类名2', ... ]
 -->
  <!-- <div :class="{ red: age < 18 }"> -->
  <div :class="arr">
    你好世界！
    <button @click="arr.push('mid')">点我加类名</button>
  </div>
</template>

<script>
export default {


  data() {
    return {
      age : 18,
      arr:['red','small']
    };
  },

  mounted() {
    
  },

  methods: {
    
  },
};
</script>

<style>
  div {
    width: 200px;
    height: 200px;
    background-color: red;
    font-size: 36px;
  }
  .red {
  color: red
}
.small {
  font-size: 8px;
}
</style>